<template>
  <div v-loading="loading" class="page-wrapper">
    <div class="row top">
      <div class="left item">
        <page-card title="概述">
          <over-view v-if="allData" :info="allData.info"></over-view>
        </page-card>
      </div>
      <div class="item">
        <page-card title="线下运维概况">
          <off-line v-if="allData" :info="allData.offline"></off-line>
        </page-card>
      </div>
    </div>
    <div class="row">
      <div class="left item">
        <page-card title="实时运行">
          <real-info v-if="allData" :real="allData.real" :info="allData.info"></real-info>
        </page-card>
      </div>
      <div class="item">
        <page-card title="线上运维概况">
          <on-line v-if="allData" :info="allData.info" :online="allData.online"></on-line>
        </page-card>
      </div>
    </div>
  </div>
</template>

<script>
import PageCard from "@/components/PageCard";
import OverView from "./components/OverView";
import OffLine from "./components/OffLine";
import RealInfo from "./components/Real";
import OnLine from "./components/OnLine";
export default {
  components: {
    PageCard,
    OverView,
    OffLine,
    RealInfo,
    OnLine
  },
  data() {
    return {
      loading: true,
      allData: null
    };
  },
  computed: {
    comId() {
      return this.$store.getters.comId;
    }
  },
  created() {
    this._getData();
  },
  methods: {
    _getData() {
      const params = {
        clientId: this.comId
      };
      return this.$axios
        .get("/plat/index/view", { params })
        .then(res => {
          if (res.code === 1) {
            this.allData = res.data;
          } else {
            throw res.msg;
          }
        })
        .catch(e => {
          const path = this.$route.fullPath;
          this.$router.push("/error?redirect=" + path);
        })
        .finally(() => (this.loading = false));
    }
  }
};
</script>

<style lang="scss" scoped>
.page-wrapper {
  background: #eff3f6;
  display: flex;
  flex-direction: column;
  /deep/ .small-icon {
    color: #308ae7;
    font-size: 14px;
    margin-right: 6px;
  }
  .row {
    flex: 1;
    max-height: calc((100% - 16px) / 2);
    margin: 0;
    .item {
      flex: 1;
      height: 100%;
      border: 1px solid rgba(230, 234, 238, 1);
    }
    .left {
      margin-right: 16px;
    }
  }
  .top {
    margin-bottom: 16px;
  }
}
</style>
